import { createContext, useState, useContext } from "react";

const Context = createContext()

function Son() {
    const person = useContext(Context)
    return (
        <div>
            This is Son, here is the person: {person.name}
        </div>
    )
}


function Father() {
    return (
        <div>
            This is Father
            <Son />
        </div>
    )
}

export function UseContextDemo() {
    const [person, setPerson] = useState({
        name: 'lucy',
        age: 45
    })
    
    return (
        <div>
            This is Root
            <Context.Provider value={person}>
                <Father />
            </Context.Provider>
        </div>
    )
}